<template>
  <div>{{tag}}
      <span id="close" @click="deleteTag" v-if="iShowX">X</span>
  </div>
</template>
<script>
import {getSessionStore} from '../util/util.js'

export default {
  methods:{
      deleteTag:function(){
        var params = new URLSearchParams();
        params.append('content', this.content);
        params.append('tag', this.tag);
        params.append('index', this.itemIndex);
        params.append('addUser',getSessionStore('name'))

        console.log(`${this.content}/${this.tag}/${this.itemIndex}`)

        this.$http.post('http://'+this.IP+'/api/deleteTag.php',params)
            .then((res)=>{
                console.log(res)
                this.$emit('deleteTag',res.data)
            });
      }
  },
  computed:{
      iShowX:function(){
          return sessionStorage.getItem('type') !== 'G';
      }
  },
  props:["tag","content","itemIndex"],
  data(){
      return {
        index:'',
      }
  }
}
</script>
<style scoped>
  div{
      font-size: 14px;
      text-align: center;
      display: inline-block;
      padding: 3px;
      border: 1px solid #aaa;
      border-radius: 5px;
      margin-top: 5px;
      margin-right: 3px;
      cursor: pointer;
  }
  div:hover{
      background-color: #aaa;
      color:#000;
  }
  #close{
      font-size: 10px;
      font-weight: bold;
      color: brown
  }
</style>
